<template>
  <div class="labelManage">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>标签管理</span>
      </header>
    </div>
    <div class="card_table">
      <!-- 表格头部控件 -->
      <header>
        <!-- 左侧查询控件 -->
        <span>
          <el-select
            class="sel_head"
            multiple
            filterable
            placeholder="请选择业务"
          >
            <el-option label="PC端业务" value="1"></el-option>
            <el-option label="App平台" value="2"></el-option>
            <el-option label="小程序" value="3"></el-option>
          </el-select>
          <el-select
            class="sel_head"
            multiple
            filterable
            placeholder="请选择事件类型"
          >
            <el-option label="PC端业务" value="1"></el-option>
            <el-option label="App平台" value="2"></el-option>
            <el-option label="小程序" value="3"></el-option>
          </el-select>
          <el-select
            class="sel_head"
            multiple
            filterable
            placeholder="请选择更新状态"
          >
            <el-option label="PC端业务" value="1"></el-option>
            <el-option label="App平台" value="2"></el-option>
            <el-option label="小程序" value="3"></el-option>
          </el-select>
          <el-select
            class="sel_head"
            multiple
            filterable
            placeholder="请选择标签"
          >
            <el-option label="PC端业务" value="1"></el-option>
            <el-option label="App平台" value="2"></el-option>
            <el-option label="小程序" value="3"></el-option>
          </el-select>
          <el-input class="sel_inp" placeholder="请输入内容">
            <template slot="prepend">埋点名称</template>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </span>
        <!-- 右侧追加控件 -->
        <span>
          <el-radio v-model="table_size" label="mini">迷你</el-radio>
          <el-radio v-model="table_size" label="small">适中</el-radio>
          <el-radio v-model="table_size" label="medium">大屏</el-radio>
        </span>
      </header>
      <!-- 表体区域 -->
      <section
        :style="{
          maxHeight:
            table_size == 'mini'
              ? '62vh'
              : table_size == 'small'
              ? '66vh'
              : '74vh'
        }"
      >
        <el-table :size="table_size" :data="tableData" style="width: 100%">
          <el-table-column prop="yw" label="业务" width="120"></el-table-column>
          <el-table-column
            prop="name"
            label="埋点名称"
            sortable
            width="120"
          ></el-table-column>
          <el-table-column
            prop="id"
            label="埋点标识"
            sortable
            width="160"
          ></el-table-column>
          <el-table-column
            prop="ev_type"
            label="事件类型"
            sortable
            width="140"
          ></el-table-column>
          <el-table-column prop="status" label="最近更新状态" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="text">
                <span
                  :class="
                    scope.row.status > 0
                      ? 'status_green'
                      : scope.row.status == 0
                      ? 'status_orange'
                      : 'status_red'
                  "
                  >{{
                    scope.row.status > 0
                      ? "正常"
                      : scope.row.status == 0
                      ? "未知"
                      : "异常"
                  }}</span
                >
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="ver"
            label="最近更新版本"
            width="180"
            sortable
          ></el-table-column>
          <el-table-column prop="label" label="标签" sortable>
            <template slot-scope="scope">
              <el-tag
                :size="table_size"
                @close="tag_close(scope.row.key, false)"
                v-for="tag in scope.row.label"
                :key="tag"
                closable
                >标签-{{ tag }}</el-tag
              >
              <el-tag
                @click="tag_close(scope.row.key, true)"
                type="warning"
                :size="table_size"
                ><i class="el-icon-circle-plus-outline"></i>添加</el-tag
              >
              <!-- <el-button class="status_orange" plain :size="table_size" icon="el-icon-circle-plus-outline" type="text">添加</el-button> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template>
              <el-button plain size="mini" type="text">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <!-- 分页控件 -->
      <footer>
        <el-pagination
          :current-page="1"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 30, 50, 100]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </footer>
    </div>
  </div>
</template>

<script>
const tableData = [
  {
    key: 1,
    yw: "翼支付-首页",
    name: "首页页面浏览",
    id: "a100.b200_500_pageview",
    ev_type: "页面浏览",
    status: 1,
    ver: "portal_20200111",
    label: [0, 1, 2, 3, 4, 5, 6]
  },
  {
    key: 2,
    yw: "翼支付-首页",
    name: "首页页面浏览",
    id: "a100.b200_500_pageview",
    ev_type: "页面浏览",
    status: 1,
    ver: "portal_20200111",
    label: [0, 1, 2, 3]
  },
  {
    key: 3,
    yw: "翼支付-首页",
    name: "首页页面浏览",
    id: "a100.b200_500_pageview",
    ev_type: "页面浏览",
    status: -1,
    ver: "portal_20200111",
    label: []
  },
  {
    key: 4,
    yw: "翼支付-首页",
    name: "首页页面浏览",
    id: "a100.b200_500_pageview",
    ev_type: "页面浏览",
    status: 0,
    ver: "portal_20200111",
    label: []
  },
  {
    key: 5,
    yw: "翼支付-首页",
    name: "首页页面浏览",
    id: "a100.b200_500_pageview",
    ev_type: "页面浏览",
    status: 0,
    ver: "portal_20200111",
    label: [0, 1, 2]
  }
];
export default {
  name: "labelManage",
  components: {
  },
  data() {
    return {
      tableData,
      table_size: "small"
    };
  },
  methods: {
    handleSizeChange(page) {
      let item = this.tableData[0];
      this.tableData = [];
      for (let i = 0; i < page; i++) {
        this.tableData.push(item);
      }
    },
    tag_close(key, b) {
      this.tableData.map(_i => {
        if (_i.key == key) {
          if (b) {
            _i.label.push(_i.label.length);
          } else {
            _i.label.pop();
          }
        }
      });
    }
  },
  computed: {
  }
};
</script>

<style scoped lang="scss">
.labelManage::-webkit-scrollbar {
  display: none;
}
.labelManage {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 10px auto 10px;
    padding-bottom: 50px;
    position: relative;
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sel_head {
        width: 160px;
        margin-right: 6px;
        margin-left: 0;
        transform: scale(1, 0.8);
      }
      .sel_inp {
        width: 300px;
        margin-left: 0;
      }
    }
    footer {
      position: absolute;
      width: 97%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      bottom: 0;
      left: 1%;
    }
    section {
      width: 98%;
      // max-height: 66vh;
      overflow-y: scroll;
      margin: 6px auto;
    }
  }
}
</style>
